$themes: (
  light: (
    bgColor: #f8f8f8,
    textColor: #212122
  ),
  dark: (
    bgColor: #212122,
    textColor: #f8f8f8
  )
);

$currentTheme: light;
@mixin useTheme() {
  @each $key, $value in $themes {
    $currentTheme: $key !global;
    html[class='#{$key}'] & {
      @content;
    }
  }
}

@function getVar($key) {
  $themeMap: map-get(
    $map: $themes,
    $key: $currentTheme
  );
  @return map-get($map: $themeMap, $key: $key);
}

#app {
  @include useTheme {
    background-color: getVar('bgColor');
    color: getVar('textColor');
  }
}
